<template>
  <div class="entry">
    <el-card shadow="never">
      <div slot="header">应用入口</div>
      <!--S入口信息-->
      <div class="entry-content">
        <!--二维码入口-->
        <img class="qrcode" :src="qrcode">
        <!--公众号出发关键词-->
        <div class="keyword">
          公众号触发关键词:{{ keyword }}
        </div>
        <!--修改关键词按钮-->
        <el-button
          class="edit-keyword-button"
          type="primary"
          size="small"
          @click="edit_dialog = true"
        >
          修改关键词
        </el-button>
      </div>
      <!--S入口信息-->
    </el-card>

    <!--S修改关键词弹窗-->
    <el-dialog
      title="修改公众号触发关键词"
      :visible.sync="edit_dialog"
    >
      <el-input v-model="form_keyword" placeholder="请输入系统触发关键词" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="edit_dialog = false">取消</el-button>
        <el-button type="primary" @click="submitKeyword">确定</el-button>
      </span>
    </el-dialog>
    <!--E修改关键词弹窗-->
  </div>
</template>

<script>
import Qrcode from 'qrcode'
export default {
  name: 'Entry',
  data() {
    return {
      // 二维码
      qrcode: '',
      keyword: '有趣红包',
      edit_dialog: false,
      form_keyword: '有趣红包'
    }
  },
  mounted() {
    this.getEntryUrl()
    this.getSetting()
  },
  methods: {
    /**
     * 获取入口链接
     */
    getEntryUrl() {
      this.$get('setting/entry-url')
        .then((res) => {
          Qrcode.toDataURL(res.data.data, {
            margin: 0
            // eslint-disable-next-line handle-callback-err
          }, (err, url) => {
            this.qrcode = url
          })
        })
    },
    /**
     * 获取系统关键词
     */
    getSetting() {
      this.$get('setting')
        .then((res) => {
          this.keyword = this.form_keyword = res.data.data.app_keyword
        })
    },
    /**
     * 提交修改系统触发关键词
     */
    submitKeyword() {
      if (this.form_keyword.length <= 0) {
        this.$message.error('关键词不能为空')
      }
      this.$put('setting/base', {
        app_keyword: this.form_keyword
      })
        .then(() => {
          this.edit_dialog = false
          this.keyword = this.form_keyword
        })
        .catch((error) => {
          this.edit_dialog = false
          this.$handleError(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .entry-content{
    position: relative;
    overflow: hidden;
    img.qrcode{
      float: left;
      width: 130px;
      height: 130px;
    }
    .keyword{
      font-size: 14px;
      color: #97a8be;
      position: absolute;
      left: 170px;
      height: 100%;
      line-height: 130px;
    }
    .edit-keyword-button{
      position: absolute;
      right: 0;
      top:50%;
      transform: translateY(-50%);
    }
  }
</style>
